<template>
  <el-menu class="navbar" mode="horizontal" :ellipsis="false">
    <!-- Logo 区域 -->
    <el-menu-item index="logo" class="logo-container">
      <img src="@/assets/logo.png" alt="Logo" class="logo" />
    </el-menu-item>

    <div class="flex-grow" />

    <!-- 右侧菜单 -->
    <el-sub-menu index="1">
      <template #title>数字中心</template>
      <el-menu-item index="1-1">数据分析</el-menu-item>
      <el-menu-item index="1-2">数字转型</el-menu-item>
      <el-menu-item index="1-3">智能决策</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>咨询中心</template>
      <el-menu-item index="2-1">战略咨询</el-menu-item>
      <el-menu-item index="2-2">管理咨询</el-menu-item>
      <el-menu-item index="2-3">技术咨询</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>人才中心</template>
      <el-menu-item index="3-1">人才招聘</el-menu-item>
      <el-menu-item index="3-2">培训发展</el-menu-item>
      <el-menu-item index="3-3">职业规划</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="4">
      <template #title>商务中心</template>
      <el-menu-item index="4-1">商务合作</el-menu-item>
      <el-menu-item index="4-2">项目对接</el-menu-item>
      <el-menu-item index="4-3">资源共享</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>
.navbar {
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-container {
  padding: 0;
}

.logo {
  height: 40px;
  margin: 10px 0;
}

.flex-grow {
  flex-grow: 1;
}

:deep(.el-sub-menu__title) {
  font-size: 16px;
}

:deep(.el-menu-item) {
  font-size: 14px;
}
</style>
